<template>
  <view id="app" class="login" :style="{minHeight: ScreenHeight + 'px'}">
    <view class="login-inner">
      <image src="../../static/images/logo.png" class="login-logo" />
      <view class="login-form">
        <form id="loginForm">
          <view class="login-input">
            <text class="lg text-gray icon-text" :class="'cuIcon-profile'"></text>
            <input placeholder="用户名" v-model="loginInfo.userAlias" />
          </view>
          <view class="login-input">
            <text class="lg text-gray icon-text" :class="'cuIcon-unlock'"></text>
            <input placeholder="密码" v-model="loginInfo.password" type="password" />
          </view>
        </form>
        <view class="text-right">
          <button class="cu-btn round bg-blue shadow login-btn" @click="loginFun">登录</button>
        </view>
        <view class="action-row">
          <navigator class="reg" :url="$RouterPath.Register">注册账号</navigator>
          <navigator class="forget" :url="$RouterPath.ModifyPwd">忘记密码</navigator>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      loginInfo: {
        userType: 100,
        userAlias: "13344445555",
        password: "111111"
      },
      ScreenHeight: 0
    };
  },
  created() {
    this.getTitleHeight();
  },
  methods: {
    loginFun: function() {
      if (!this.loginInfo.userAlias) {
        return uni.showToast({
          title: "请输入用户名",
          icon: "none"
        });
      }
      if (!this.loginInfo.password) {
        return uni.showToast({
          title: "请输入密码",
          icon: "none"
        });
      }

      this.loginInfo.userAlias = this.loginInfo.userAlias.trim();
      this.loginInfo.password = this.loginInfo.password.trim();
      this.$LoginService.login({
        param: this.loginInfo,
        success: data => {
          this.$Storage.clearData(); // 登录成功后清除缓存，避免因缓存无法获取最新数据（区域，资质）
          this.$Storage.setUserInfo(data, data.token);
          this.$Storage.setData(
            this.$Consts.LOGIN_INFO,
            JSON.stringify(this.loginInfo)
          );
          this.$store.commit("setMemberInfo", data);
          uni.switchTab({
            url: "../index/index"
          });
        },
        error: msg => {
          uni.showToast({
            title: msg,
            icon: "none"
          });
        }
      });
    },
    getTitleHeight() {
      uni.getSystemInfo({
        success: res => {
          this.ScreenHeight = res.screenHeight;
          //   console.log(this.ScreenHeight, "高度");
          //   console.log(res.model);
          //   console.log(res.pixelRatio);
          //   console.log(res.windowWidth);
          //   console.log(res.windowHeight);
          //   console.log(res.language);
          //   console.log(res.version);
          //   console.log(res.platform);
        }
      });
    }
  },
  components: {}
};
</script>

<style lang="scss" scoped>
.login {
  display: flex;
  flex: 1;
  flex-direction: column;
  background: url("../../static/images/carLoginBg.png") no-repeat;
  background-size: 100% 100%;
  .login-logo {
    width: 300rpx;
    height: 200rpx;
  }
  .login-inner {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    flex: 1;
  }
  .login-form {
    // margin: 40rpx;
    margin-top: 60rpx;
    padding: 35rpx;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 20rpx;
    width: 80%;
    .login-input {
      display: flex;
      align-items: center;
      margin-top: 30rpx;
      height: 120rpx;
      border-radius: 60rpx;
      color: #ffffff;
      background-color: rgba(2, 2, 2, 0.6);
      justify-content: flex-start;
      image {
        width: 40rpx;
        height: 40rpx;
        line-height: 120rpx;
        margin: 0 20rpx 0 40rpx;
      }
    }

    .login-btn {
      margin-top: 60rpx;
      width: 100%;
      height: 120rpx;
      line-height: 120rpx;
      color: #ffffff;
      border: none;
      border-radius: 5000rpx;
      font-size: 16px;
      background-color: #406fa0;
      background-image: linear-gradient(5deg, #033e7a, #406fa0);
    }

    .action-row {
      display: flex;
      padding: 40rpx 0;
      text-align: center;
      color: #ffffff;

      .reg {
        flex: 1;
        align-items: flex-start;
      }

      .forget {
        flex: 1;
        align-items: flex-end;
      }
    }
  }
  .login-footer {
    //   padding: 15rpx;
    font-size: 12px;
    text-align: center;
    color: #fff;
    // display: flex;
    // flex: 1;
    justify-content: center;
    align-items: center;
    .login-footer-text {
      color: #fff;
    }
    .href-blue {
      color: #3688ff;
    }
  }
  .icon-text {
    color: #fff;
    font-size: 40rpx;
    padding: 0 20rpx;
  }
}
</style>
